<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入公共样式 -->
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <!-- 引入放大镜插件 -->
    <link rel="stylesheet" href="./css/magnifier.css">
    <!-- 引入头尾部样式 -->
    <link rel="stylesheet" href="./css/head.css">
    <link rel="stylesheet" href="./css/footer.css">
    <!-- 引入登入样式 -->
    <link rel="stylesheet" href="./css/commodity_details.css">

    <!-- 引入js库文件 -->
    <script src="./lib/jquery.min.js"></script>
    <script src="./lib/magnifier.js"></script>
    <script src="./js/commodity_details.js"></script>
</head>

<body>
    <!-- 头部顶部区域 -->
    <div class="head-top">
        <div class="wrapper clearfix">
            <p class="fl">乐购www.legou.com</p>
            <p class="fr">欢迎光临乐购 请 <a href="#">登入|</a> <a href="#">注册</a></p>
        </div>
    </div>
    <!-- 头部顶部区域结束 -->

    <!-- 头部logo搜索导航栏区域 -->
    <!-- 头部logo搜索导航栏区域 -->
    <div class="head-logo wrapper clearfix">
        <!-- logo区域 -->
        <div class="logo fl">
            <h1 class="fl"><a href="index.html"></a></h1>
            <h2 class="fl"><a href="index.html"></a></h2>
        </div>
        <!-- 右边区域-->
        <div class="logo-right fr">
            <div class="logo-left fl">
                <p class="p1">DJI大疆官方旗舰店</p>
                <p class="p2">品牌直销</p>
                <p class="p3">收藏本店</p>
            </div>
            <!-- 搜索框 -->
            <div class="logo-right-searchBox fl">
                <form action="#" class="fl">
                    <input type="text fl" placeholder="请输入商品名">
                    <input type="submit" class="fr" value="">
                </form>
                <div class="fl">
                    <a href="#"><i></i><span>购物车</span></a>
                </div>
            </div>
        </div>
    </div>
    <!-- 头部logo搜索导航栏区域结束 -->
    <!-- 头部logo搜索导航栏区域结束 -->


    <!-- ad广告区域 -->
    <div class="dajiangad"></div>

    <!-- 商品展示区 -->
    <div class="product_exhibition wrapper clearfix">
        <div class="left fl">
            <div class="magnifier" id="magnifier1">
                <div class="magnifier-container">
                    <div class="images-cover"></div>
                    <!--当前图片显示容器-->
                    <div class="move-view"></div>
                    <!--跟随鼠标移动的盒子-->
                </div>
                <div class="magnifier-assembly pret">
                    <!--按钮组-->
                    <div class="magnifier-line pret">
                        <button class="left"><i></i></button>
                        <button class="right"><i></i></button>
                        <ul class="animation03 ">
                            <li>
                                <div class="small-img">
                                    <img src="./imgs/djxiao1.png" />
                                </div>
                            </li>
                            <li>
                                <div class="small-img">
                                    <img src="./imgs/djxiao2.png" />
                                </div>
                            </li>
                            <li>
                                <div class="small-img">
                                    <img src="./imgs/djxiao3.png" />
                                </div>
                            </li>
                            <li>
                                <div class="small-img">
                                    <img src="./imgs/djiangxiao4.png" />
                                </div>
                            </li>
                        </ul>
                    </div>
                    <!--缩略图-->
                </div>
                <div class="magnifier-view"></div>
                <!--经过放大的图片显示容器-->
            </div>

            <script>
                $(function () {
                    var magnifierConfig = {
                        magnifier: "#magnifier1",//最外层的大容器
                        width: 565,//承载容器宽
                        height: 565,//承载容器高
                        moveWidth: null,//如果设置了移动盒子的宽度，则不计算缩放比例
                        zoom: 3//缩放比例
                    };

                    magnifier(magnifierConfig);
                });
            </script>
        </div>
        <div class="right fl">
            <div class="box1">
                <p>【新品首发】DJI 大疆RoboMaster S1 机甲大师 S1专业教育机器人</p>
                <span>寓教于乐，玩出名堂</span>
            </div>
            <div class="box2">
                <p class="p1">价格 <span>¥3800.00</span></p>
                <p class="p2">促销价: <span>¥ 3499.00 - 4200.00</span></p>
                <p class="p3">本店活动: <span>满99包邮</span> <span>更多优惠>></span></p>
            </div>
            <p>运费 &emsp;江苏苏州 至 成都 &nbsp;快递: 0.00</p>
            <ul>
                <li>
                    <p>月销量<span>2871</span></p>
                </li>
                <li>
                    <p>月销量<span>2871</span></p>
                </li>
                <li>
                    <p class="p3">月销量<span>2871</span></p>
                </li>
            </ul>
            <!-- 分类盒子 -->
            <div class="classify">
                <p class="fl">颜色分类</p>
                <div class="box1 fl">
                    <a>
                        机甲大师 S1RoboMaster S1套餐一
                    </a>
                    <a>
                        机甲大师 S1RoboMaster S1套餐一
                    </a>
                    <a>
                        机甲大师 S1RoboMaster S1套餐一
                    </a>
                    <a>
                        机甲大师 S1RoboMaster S1套餐一
                    </a>
                    <a>
                        机甲大师 S2 预定
                    </a>
                    <a>
                        机甲大师全套配件
                    </a>
                </div>
                <p class="fl">数量:</p>
                <input type="number" class="fl">
                <div class="clearfix"></div>
                <p class="fl">花呗分期</p>
                <div class="box3 fl">
                    <a>
                        ¥1166.33*3期（0手续费）
                    </a>
                    <a>
                        ¥1166.33*3期（0手续费）
                    </a>
                    <a>
                        ¥1166.33*3期（0手续费）
                    </a>
                </div>
                <div class="clearfix"></div>
                <!-- 立即购买 -->
                <div class="box4">
                    <a class="a1">立即购买</a>
                    <a class="a2"><i></i>加入购物车</a>
                </div>
                <p class="p4 fl">服务承诺:</p>
                <div class="box5 fl">
                    <a>正品保证</a>
                    <a>急速退款</a>
                    <a>赠运费险</a>
                    <a>七天无理由退换</a>
                    <a>支付方式</a>
                </div>
            </div>

        </div>
    </div>

    <!-- 商品评价区 -->
    <div class="wrapper clearfix">
        <!-- 评价 -->
        <p class="comm fl"><a class="bgc">产品详情</a> <a>累积评价 10915</a></p>
        <div class="commodity_evaluate  fl">
            
                <!-- 评分 -->
                <div class="score clearfix">
                    <p class="p1">与描述相符</p>
                    <p class="p2 fl">4.9</p>
                    <p class="p3 fl">⭐⭐⭐⭐⭐⭐</p>
                    <p class="p4"><span>好评率98%</span> <i></i></p>
                </div>
                <!-- 评价全选 -->
                <div class="scoreAll">
                    <label><input type="radio" name="all">全选</label>
                    <label><input type="radio" name='all'>追加</label>
                    <label><input type="radio" name="all">图片</label>
                    <select class="fr">
                        <option value="">按默认</option>
                    </select>
                </div>

                <!-- 用户的评价 -->
                <ul>
                    <script>
                        for (let i = 0; i < 15; i++) {
                            document.write(`<li>
                    <p class="p1">挺不错的，机甲大师对战T-34-85</p>
                    <img src="./imgs/djxiao1.png" alt="">
                    <img src="./imgs/djxiao1.png" alt="">
                    <p class="p2">2019-09-09   13:55:30  <span class="fr">t***1(匿名)</span></p>
                    <p class="p3">
                        解释：亲，感谢您在DJI 大疆官方旗舰店的购物及评价，能让亲满意是我们最开心的事情，我们会不断的努力，争取给您更多更好的产品，我们一直也在不断的努力争取给您最好的购物体验，感谢亲的支持，期待下次亲的光临
                    </p>
                </li>`)
                        }

                    </script>
                </ul>
        </div>

        <!-- 商品展示 -->
        <div class="img fl">
            <div class="box1"><img src="./imgs/dj001.png" alt=""></div>
            <div class="box2"><img src="./imgs/dj002.png" alt=""></div>
        </div>

        <!-- 右边盒子 -->
        <div class="commodity_right fr">
            <h3>猜你喜欢</h3>
            <ul>
                <script>
                    for(let i=0;i<10;i++){
                        document.write(`<li>
                    <img src="./imgs/djxiao3.png" alt="">
                </li>`)
                    }
                </script>
            </ul>
        </div>
    </div>

    <!-- 公共样式搜索区 -->
    <div class="search_panel">
        <a href="//www.mi.com/index.html"></a>
        <script>
            $('.logo-right-searchBox form').clone(true).appendTo($('.search_panel'))
            $(window).scroll(function () {
                scrollY > 200 ? $('.search_panel').show() : $('.search_panel').hide()
            })
        </script>
    </div>

    <!-- 页脚区域 -->
    <div class="footer">
        <div class="wrapper">
            <div class="footer-top">
                <ul>
                    <li>
                        <img src="./imgs/CgQI0lWskgmADBnsAAAPZvcSh3E68900~1.jpg" alt="">
                        <div>
                            <h4>正品保障</h4>
                            <p>收货时间由你做主</p>
                        </div>
                    </li>
                    <li>
                        <img src="./imgs/CgQIz1WslI-Adao3AAAN5b_ut2I80100~1.jpg" alt="">
                        <div>
                            <h4>正品保障</h4>
                            <p>收货时间由你做主</p>
                        </div>
                    </li>
                    <li>
                        <img src="./imgs/ChEbulWsk4iADa_aAAAM544hHN818600~1.jpg" alt="">
                        <div>
                            <h4>正品保障</h4>
                            <p>收货时间由你做主</p>
                        </div>
                    </li>
                    <li>
                        <img src="./imgs/ChEi11WsyiyALBbiAAAN9lEEK5M33200~1.jpg" alt="">
                        <div>
                            <h4>正品保障</h4>
                            <p>收货时间由你做主</p>
                        </div>
                    </li>
                </ul>
            </div>

            <div class="footer-center clearfix">
                <dl>
                    <dt>新手入门</dt>
                    <dd>购物流程</dd>
                    <dd>购物流程</dd>
                    <dd>购物流程</dd>
                    <dd>服务协议及隐私说明</dd>
                    <dd>购物流程</dd>
                </dl>
                <dl>
                    <dt>新手入门</dt>
                    <dd>购物流程</dd>
                    <dd>购物流程</dd>
                    <dd>购物流程</dd>
                    <dd>礼品卡支付</dd>
                    <dd>购物流程</dd>
                </dl>
                <dl>
                    <dt>新手入门</dt>
                    <dd>购物流程</dd>
                    <dd>商品验货与签收</dd>
                </dl>
                <dl>
                    <dt>新手入门</dt>
                    <dd>购物流程</dd>
                    <dd>退换货政策</dd>
                </dl>

                <div class="qr-img fl">
                    <ul class="fl">
                        <li>
                            <p>App更优惠</p>
                            <img src="./imgs/qryhd.png" alt="">
                        </li>
                        <li>
                            <p>加微信查订单</p>
                            <img src="./imgs/qryhd.png" alt="">
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="footer-buttom">
            <div class="wrapper">
                <p>沪ICP备XXXXXXXXX号 | 经营证照 | 互联网药品信息服务资格证(沪)-经营性-2017-0006 | 违法和不良信息举报电话：XXX-XXXXXXXX | 沪B2-XXXXXXX |
                </p>
                <p>沪公网安备 XXXXXXXXX号 | 友情链接 | 出版物经营许可证 | 增值电信业务经营许可证</p>
                <ul>
                    <li><img src="./imgs/footer1.png" alt=""></li>
                    <li><img src="./imgs/footer1.png" alt=""></li>
                    <li><img src="./imgs/footer1.png" alt=""></li>
                    <li><img src="./imgs/footer1.png" alt=""></li>
                    <li><img src="./imgs/footer2.jpg" alt=""></li>
                </ul>
            </div>

        </div>
    </div>
</body>

</html>